<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  fontSize: {
    type: String,
    default: 'text-4xl'
  },
  largeScreenFontSize: {
    type: String,
    default: 'lg:text-6xl'
  },
  fontColor: {
    type: String,
    default: 'text-gray-900 dark:text-white'
  },
  marginBottom: {
    type: String,
    default: 'mb-4 lg:mb-7'
  },
  paddingHorizontal: {
    type: String,
    default: 'xl:px-36'
  },
  text: {
    type: String,
    default: 'Build websites even faster with components on top of Tailwind CSS'
  },
  headingLevel: {
    type: String,
    default: 'h1',
    validator: value => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value)
  }
});
</script>

<template>
  <component :is="props.headingLevel" :class="[
    fontSize,
    largeScreenFontSize,
    fontColor,
    marginBottom,
    paddingHorizontal,
    'font-bold tracking-tight',
    'lg:font-extrabold lg:leading-none',
    'lg:text-center'
  ]">
    {{ text }}
  </component>
</template>

<style scoped>
/* 您可以在这里根据需要添加更多样式 */
</style>